<template>
    <div class="home">
        <van-search placeholder="请输入小区或地址" round>
            <template #label>
                <span @click="cityBtn">上海
                    <van-icon name="arrow-down" />
                </span>
            </template>
        </van-search>
        <div class="ditu" @click="onSearch">
            <van-icon name="smile-o" />
        </div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="image in swipeImg" :key="image.id">
                <img v-lazy="baseimg+ image.imgSrc" />
            </van-swipe-item>
        </van-swipe>
        <div class="main">
            <van-row justify="space-around" gutter="20">
                <van-col span="6" v-for="(obj,index) in RentPer" :key="index">
                    <van-icon :name="obj.name" size="40px" color="#3ec28c" />
                    <p>{{obj.text}}</p>
                </van-col>
            </van-row>
        </div>
        <div class="zufan">
            <van-row justify="space-around">
                <van-col span="12" v-for="obj in groups" :key="obj.id">
                    <van-col span='12'>
                        <img :src="baseimg+ obj.imgSrc">
                    </van-col>
                    <van-col span='12'>
                        <p>{{obj.title}}</p>
                        <p>{{obj.desc}}</p>
                    </van-col>
                </van-col>
            </van-row>
        </div>
    </div>
</template>

<script>
import { swipeApi, groupsApi } from '@/api'
export default {
    created() {
        this.getswipeImg()
        this.getgroups()
    },
    data() {
        return {
            swipeImg: [],
            baseimg: 'http://liufusong.top:8080',
            RentPer: [
                { name: 'wap-home-o', text: '整租' },
                { name: 'friends-o', text: '合租' },
                { name: 'newspaper-o', text: '地图找房' },
                { name: 'home-o', text: '去出租' }
            ],
            groups: []
        }
    },
    methods: {
        //轮播图
        async getswipeImg() {
            const { data } = await swipeApi()
            this.swipeImg = data.body
        },
        //地图功能
        onSearch() {

        },
        //租房小组
        async getgroups() {
            const { data } = await groupsApi()
            this.groups = data.body
            //  console.log(this.groups)
        },
        cityBtn() {
            this.$router.push('/city')
        }
    }
}
</script>

<style lang="less" scoped>
.van-swipe-item {
    height: 425px;

    img {
        width: 100%;
    }
}

.van-search {
    position: fixed;
    top: 40px;
    left: 30px;
    z-index: 999;
    width: 600px;
    padding: 0;
}

.ditu {
    position: fixed;
    top: 45px;
    right: 30px;
    z-index: 999;
}

.main {
    background-color: #fff;
    margin: 20px 20px 20px 70px;

    p {
        font-size: 32px;
    }
}

.van-col .van-icon {
    background-color: #f2fbf7;
    border-radius: 40px;
}

.zufan {
    background-color: #f6f5f6;
    padding: 20px;

    .van-col {
        background-color: #fff;
    }

    img {
        width: 160px;
    }

    p {
        font-size: 28px;
    }
}
</style>